{% extends "core/base.html" %} {% block title %} {{ item.name }} {% endblock %}
{% block content %}
<div class="grid grid-cols-5 gap-6">
  <div class="col-span-3">
    <img src="{{ item.image.url }}" class="rounded-xl" alt="" />
  </div>

  <div class="col-span-2 p-6 bg-gray-100 rounded-xl">
    <h1 class="mb-6 text-3xl">{{item.name}}</h1>
    <p class="text-gray-500"><strong>Price: </strong> {{item.price}}</p>
    <p class="text-gray-500">
      <strong>Seller: </strong> {{item.created_by.username}}
    </p>

    {% if item.description %}
    <p class="text-gray-700">
      <strong class="text-gray-500">Description: <br /> </strong>
      {{item.description}}
    </p>
    {% endif %}

    {% if request.user == item.created_by %}
      <div class="mt-6 p-6 bg-white rounded-xl">
        <p>This is your item!</p>
        <a href="{% url 'item:edit' item.id %}" class="inline-block mt-6 px-6 py-3 text-lg font-semibold bg-teal-500 text-white rounded-xl">Edit</a>
        <a href="{% url 'item:delete' item.id %}" class="inline-block mt-6 px-6 py-3 text-lg font-semibold bg-red-500 text-white rounded-xl">Delete</a>
      </div>

    {% else %}
      <a href="{% url 'conversation:new' item.id %}" class="inline-block mt-6 px-6 py-3 text-lg font-semibold bg-teal-500 text-white rounded-xl hover:bg-teal-700"> Contact Seller </a>
    {% endif %}
  </div>
</div>

<div class="mt-6 px-6 py-12 bg-gray-100 rounded-xl">
  <h2 class="mb-12 text-2xl text-center">Related Items</h2>

  <div class="grid grid-cols-3 gap-3">
    {% for item in related_items %}
    <div>
      <a href="{% url 'item:detail' item.id %}">
        <div>
          <img src="{{ item.image.url }}" class="rounded-top-xl" alt="" />
        </div>
        <div class="p-6 bg-white rounded-b-xl">
          <h2 class="text-2xl">{{ item.name }}</h2>
          <p class="text-gray-500">price: {{ item.price }}</p>
        </div>
      </a>
    </div>
    {% endfor %}
  </div>
</div>

{% endblock %}